<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>接龙展示-自定义节点- Dom 元素</title>
    <script src="./lib/g6.js"></script>
    <script src="./lib/plugins.js"></script>
    <style>
      #mountNode {
        border: 1px solid #333;
      }
      .node {
        border: 1px solid red;
        width: 100px;
        height: 100px;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div id="mountNode"></div>
    <script>
      const data = {
        nodes: [
          {
            id: "node1",
            x: 0,
            y: 100,
            shape: "customNode"
          },
          {
            id: "node2",
            x: 300,
            y: 200
          }
        ],
        edges: [
          {
            source: "node1",
            target: "node2"
          }
        ]
      };
      G6.registerNode("customNode", {
        draw(item) {
          const group = item.getGraphicGroup();
          const model = item.getModel();
          const html = G6.Util.createDOM('<div class="node">HTML 节点</div>');
          return group.addShape("dom", {
            attrs: {
              x: 0,
              y: 0,
              width: 100,
              height: 100,
              html
            }
          });
          return group;
        }
      });
      const graph = new G6.Graph({
        container: "mountNode",
        width: 500,
        height: 500,
        renderer: "svg"
      });
      graph.on('node:click', ev => {
        console.log(ev)
        let model = ev.item.getModel()
        console.log(model)
      });      
      graph.read(data);
    </script>
  </body>
</html>
